<template>
	<view>
		<nav-bar title="支付成功"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="paysuccess_info">
			<view>
				<image src="../../static/icon/ic_pay_successful.png" mode="aspectFit"></image>
				<text>付款成功</text>
			</view>
			<text>订单编号：{{orderNo}}</text>
			<button class="yes" @click="onConfirm">继续逛逛~</button>
			<button @click="onJumpWelfare" v-if="vipOrder">领取大礼包</button>
			<button @click="onJumpOrder" v-else>查看订单</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderNo:"",
			vipOrder: false
		};
	},
	//第一次加载
	onLoad(e) {
		if(e.orderNo){
			this.orderNo = e.orderNo;
			if(e.orderNo.substr(0,5) == '32000'){
				this.vipOrder = true;
			}
		}
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		onConfirm(){
			uni.switchTab({
				url: this.$base.homePath
			});
		},
		onJumpOrder(url) {
			uni.redirectTo({
				url: "/pages/my/order/orderDetail?orderNo=" + this.orderNo
			});
		},
		onJumpWelfare(url) {
			uni.redirectTo({
				url: "/pages/welfare/welfareAgency?take=1"
			});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
page {
	background: #ffffff;
}
.paysuccess_info{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 220rpx;
	>view{
		display: flex;
		flex-direction: column;
		align-items: center;
		>image{
			width: 140rpx;
			height: 140rpx;
		}
		>text{
			padding: 40rpx 0rpx 30rpx 0rpx;
			font-size: 36rpx;
			color: #333333;
		}
	}

	>text{
		font-size: 24rpx;
		color: #333333;
		padding: 30rpx 50rpx;
		border-bottom: 2rpx dashed #cccccc;
	}
	.yes{
		@include theme('gradient_bg');
		color: #FFFFFF;
		margin-top: 40rpx;
	}
	>button{
		color: $themeColor;
		font-size: 32rpx;
		width: 480rpx;
		height: 88rpx;
		border: solid 1px  $themeColor;
		margin-top: 30rpx;
		background-color: transparent;
	}
}
</style>
